<template>
  <div :class="[myValue?'show-search':'hidden-search']">
    <div class="mask"></div>
    <div class="search d-flex jc-center ai-center">
      <div class="search-center">
        <div class="search-tip mb-5 fs-xxl text-lightgrey">你想搜索什么 ? 按ESC即可退出 ...</div>
        <div class="input-box d-flex ai-center">
          <i class="iconfont icon-sousuo mx-3 "></i>
          <input type="text" class="input fs-xxl text-primary">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      myValue: this.value
    }
  },
  props: {
    value: {
      type: Boolean
    }
  },
  watch: {
    value (val) {
      this.myValue = val
    },
    myValue (val) {
      this.$emit('input', val)
    }
  },

  mounted () {
    //监听键盘按键事件
    this.$nextTick(() => {
      document.addEventListener('keyup', (e) => {
        //此处填写你的业务逻辑即可
        if (e.keyCode == 27) {
          this.myValue = false
        }
      })
    })
  },
}
</script>

<style lang="scss" scoped>
.show-search {
  visibility: visible;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}
.hidden-search {
  visibility: hidden;
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  opacity: 1;
}
.search {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  .search-center {
    width: 50rem;
    .input-box {
      height: 3.75rem;
      border: 2px solid rgb(204, 204, 204);
      border-radius: 3.75rem;
      .iconfont {
        font-size: 26px;
        color: rgb(204, 204, 204);
      }
      .input {
        height: 100%;
        flex: 1;
      }
    }
  }
}
</style>
